<template>
  <div class="tp">
    <Header/>

    <Content>
      <div class="cp">
        <div class="card">
          <BasicForm @register="registerFilter" @submit="onSearch">
          </BasicForm>
          <a-tabs v-model:activeKey="state.search.type" type="line">
            <a-tab-pane v-for="o in verifyTypesList" :key="o.key" :tab="o.label">
              <BasicTable @register="state[o.value].registerTable" :resizeHeightOffset="44">
              </BasicTable>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </Content>
  </div>
</template>

<script setup>
import {defineOptions, h, nextTick, onMounted, reactive, watch} from 'vue';
import dayjs from 'dayjs'
import {useRoute, useRouter} from 'vue-router';

import {BasicTable, useTable} from '@/components/Table';

import Header from '@/widget/header.vue';
import Content from '@/widget/content.vue';
import {PAGE} from '@/api/http';
import {verifyTypesList} from '@/api/ds';

import {BasicForm, useForm} from '@/components/Form/index';

defineOptions({name: 'VerifyList'});

const route = useRoute(),
    router = useRouter();

const {type = null} = route.query;

const [registerFilter, filter] = useForm({
  baseColProps: {style: {paddingRight: '12px'}},
  actionColOptions: {span: 12},
  submitOnReset: true,
  schemas: [
    {
      field: 'startTime',
      component: 'DatePicker',
      componentProps: {
        showTime: false,
        placeholder: '开始日期',
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
        disabledDate: (value) => filter.getFieldsValue().endTime < dayjs(value).format("YYYY-MM-DD")
      },
      colProps: {span: 6},
    },

    {
      field: 'endTime',
      component: 'DatePicker',
      componentProps: {
        showTime: false,
        placeholder: '结束日期',
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
        disabledDate: (value) => filter.getFieldsValue().startTime > dayjs(value).format("YYYY-MM-DD")
      },
      colProps: {span: 6},
    },
  ],
});

const [registerTableDouyin, tableDouyin] = useTable({
  api: PAGE('/membership/getVerifyLogList'),
  immediate: false,
  beforeFetch: (arg) => getSearchArg(arg),
  columns: [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      ellipsis: false,
    },
    {
      title: '客户信息',
      dataIndex: 'memberCode',
      ellipsis: false,
      customRender: ({record}) =>
          h('span', {innerHTML: `${record.memberName}&nbsp;${record.memberMobile}`},),
    },
    {
      title: '核销码',
      dataIndex: 'verifyCode',
      ellipsis: false,
    },
    {
      title: '客人买券实付金额',
      dataIndex: 'price',
      ellipsis: false,
    },
    {
      title: '券核销时间',
      dataIndex: 'verifyTime',
      ellipsis: false,
    },
  ],
  useSearchForm: false,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
  rowKey: 'id',
});

const [registerTableMtdp, tableMtdp] = useTable({
  api: PAGE('/membership/getVerifyLogList'),
  immediate: false,
  beforeFetch: (arg) => getSearchArg(arg),
  columns: [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      ellipsis: false,
    },
    {
      title: '客户信息',
      dataIndex: 'memberCode',
      ellipsis: false,
      customRender: ({record}) =>
          h('span', {innerHTML: `${record.memberName}&nbsp;${record.memberMobile}`},),
    },
    {
      title: '核销码',
      dataIndex: 'verifyCode',
      ellipsis: false,
    },
    {
      title: '门店实收金额',
      dataIndex: 'price',
      ellipsis: false,
    },
    {
      title: '券核销时间',
      dataIndex: 'verifyTime',
      ellipsis: false,
    },
  ],
  useSearchForm: false,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
  rowKey: 'id',
});

const [registerTableAlipay, tableAlipay] = useTable({
  api: PAGE('/membership/getVerifyLogList'),
  immediate: false,
  beforeFetch: (arg) => getSearchArg(arg),
  columns: [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      ellipsis: false,
    },
    {
      title: '客户信息',
      dataIndex: 'memberCode',
      ellipsis: false,
      customRender: ({record}) =>
          h('span', {innerHTML: `${record.memberName}&nbsp;${record.memberMobile}`},),
    },
    {
      title: '核销码',
      dataIndex: 'verifyCode',
      ellipsis: false,
    },
    {
      title: '商品金额',
      dataIndex: '',
      ellipsis: false,
    },

    {
      title: '门店实收金额',
      dataIndex: '',
      ellipsis: false,
    },
    {
      title: '券核销时间',
      dataIndex: 'verifyTime',
      ellipsis: false,
    },
  ],
  useSearchForm: false,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
  rowKey: 'id',
});

const [registerTableKoubei, tableKoubei] = useTable({
  api: PAGE('/membership/getVerifyLogList'),
  immediate: false,
  beforeFetch: (arg) => getSearchArg(arg),
  columns: [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      ellipsis: false,
    },
    {
      title: '客户信息',
      dataIndex: 'memberCode',
      ellipsis: false,
      customRender: ({record}) =>
          h('span', {innerHTML: `${record.memberName}&nbsp;${record.memberMobile}`},),
    },
    {
      title: '核销码',
      dataIndex: 'verifyCode',
      ellipsis: false,
    },
    {
      title: '客人买券实付金额',
      dataIndex: 'price',
      ellipsis: false,
    },

    {
      title: '门店实收金额',
      dataIndex: '',
      ellipsis: false,
    },
    {
      title: '券核销时间',
      dataIndex: 'verifyTime',
      ellipsis: false,
    },
  ],
  useSearchForm: false,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
  rowKey: 'id',
});

const [registerTableWechat, tableWechat] = useTable({
  api: PAGE('/membership/getVerifyLogList'),
  immediate: false,
  beforeFetch: (arg) => getSearchArg(arg),
  columns: [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      ellipsis: false,
    },
    {
      title: '客户信息',
      dataIndex: 'memberCode',
      ellipsis: false,
      customRender: ({record}) =>
          h('span', {innerHTML: `${record.memberName}&nbsp;${record.memberMobile}`},),
    },
    {
      title: '门店实收金额',
      dataIndex: '',
      ellipsis: false,
    },
    {
      title: '核销码',
      dataIndex: 'verifyCode',
      ellipsis: false,
    },
    {
      title: '券核销时间',
      dataIndex: 'verifyTime',
      ellipsis: false,
    },
  ],
  useSearchForm: false,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
  rowKey: 'id',
});

const state = reactive({
  search: {
    type: type || 'douyin',
  },
  douyin: {
    registerTable: registerTableDouyin,
    table: tableDouyin,
  },
  meituan: {
    registerTable: registerTableMtdp,
    table: tableMtdp,
  },
  alipay: {
    registerTable: registerTableAlipay,
    table: tableAlipay,
  },
  koubei: {
    registerTable: registerTableKoubei,
    table: tableKoubei
  },
  wechat: {
    registerTable: registerTableWechat,
    table: tableWechat
  },
});

function getSearchArg(arg) {
  const {type: verifyType} = state.search;
  const data = filter.getFieldsValue();
  return Object.assign(arg, data, {verifyType});
}

onMounted(() => {
  onSearch();
});

watch(
    () => state.search.type,
    () => nextTick(onSearch),
);

async function onSearch() {
  const {type} = state.search,
      target = state[type];

  target.table.reload();
  target.table.redoHeight();
}
</script>
<style lang="less" scoped>
.card {
  padding: 16px;
}

:deep(.ant-tabs-nav) {
  margin: 0 8px 8px;
}
</style>
